<script>
import Taro from "@tarojs/taro";
import { reactive } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { getConsistBeanByIdApi } from "../details/api";
import { getUserInfo, getDicMap } from "@/utils/storage";

export default {
  name: "ChangeType",
  components: {},
  setup() {
    const state = reactive({
      radioList: [
        {
          title: "重车确报",
          value: "12",
        },
        {
          title: "空载确报",
          value: "34",
        },
        {
          title: "搭载空箱",
          value: "56",
        },
      ],
      selectedRadio: "",
    });

    const { route, redirectTo, navigateBack } = useTzRouter();
    const { consistId } = route.query;
    const { userType } = getDicMap();

    if (consistId) {
      getConsistBeanByIdApi({
        consistId,
      })
        .then((res) => {
          const { inOutType } = res.data.consistBean;
          const result = res.data.result;
          state.consistBean = res.data.consistBean;

          if (["MT4401", "MT4402"].indexOf(inOutType) !== -1) {
            state.selectedRadio = "12";
          } else if (["MT4403", "MT4404"].indexOf(inOutType) !== -1) {
            state.selectedRadio = "34";
          } else if (["MT4405", "MT4406"].indexOf(inOutType) !== -1) {
            state.selectedRadio = "56";
          }

          if (userType.isPersonal && result !== undefined && !result) {
            return Taro.showModal({
              content: "提示:您长时间没有操作,系统将自动重新登录.",
              confirmText: "好",
              showCancel: false,
            });
          }
          return;
        })
        .then((res) => {
          res &&
            res.confirm &&
            redirectTo({
              path: "/pages/login/index",
            });
        })
        .catch(() => {});
    }

    const handleRadioClick = (item) => {
      state.selectedRadio = item.value;
    };

    const handleSubmit = () => {
      if (!state.selectedRadio) {
        Taro.showToast({
          title: "请选择要修改的类型",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      const { truckList, consistId } = state.consistBean;
      const truckType = truckList[0].truckType; // 0.吨车  1.货柜车
      const selectedRadio = state.selectedRadio;

      if (selectedRadio === "56" && truckType === "0") {
        Taro.showToast({
          title: "吨车不能变更类型为搭载空箱,请先修改车辆类型",
          icon: "none",
          duration: 2000,
        });
        return;
      }

      let changeType;
      if (selectedRadio === "56" && ["MT4405", "MT4406"].indexOf === -1) {
        changeType = 2;
        redirectTo({
          path: "/pages/subCN/truck/home/index",
          query: {
            opt: 1,
            type: changeType,
            consistId,
          },
        });
        return;
      }

      switch (selectedRadio) {
        case "12":
          changeType = 3;
          break;
        case "34":
          changeType = 1;
          break;
        default:
          changeType = 2;
      }

      redirectTo({
        path: "/pages/subCN/truck/home/index",
        query: {
          opt: 1,
          type: changeType,
          consistId,
        },
      });
    };

    return () => {
      return (
        <tz-view class="change-type">
          <tz-view class="radio-box">
            {state.radioList.map((item) => (
              <tz-view
                class={state.selectedRadio === item.value && "active"}
                onClick={() => handleRadioClick(item)}
              >
                {item.title}
              </tz-view>
            ))}
          </tz-view>
          <tz-view class="btn-group">
            <tz-button type="danger" onClick={handleSubmit}>
              确定
            </tz-button>
            <tz-button
              type="default"
              onClick={() => navigateBack({ delta: 1 })}
            >
              取消
            </tz-button>
          </tz-view>
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.change-type {
  display: flex;
  align-items: center;
  flex-direction: column;
  .radio-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid $border-color;
    > .tz-view {
      width: 100%;
      text-align: center;
      line-height: 36px;
      border: 1px solid $border-color;
      height: 36px;
      margin-bottom: 10px;
      font-size: 18px;
      &:last-child {
        margin-bottom: 0;
      }
      &.active {
        background-color: $primary-color;
        color: $white;
      }
    }
  }
  .btn-group {
    margin-top: 20px;
    .tz-button {
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
